import React, { Component } from 'react'
import { createPortal } from 'react-dom'

import Dialog from './Dialog'

class PortalDemo extends Component {
  state = {
    show: false
  }

  open = () => {
    this.setState({
      show: true
    })
  }

  close = () => {
    console.log(0)
    this.setState({
      show: false
    })
  }
  
  render() {
    return (
      <>
        <div onClick={this.close}>
          {
            this.state.show && <Dialog></Dialog>
          }
        </div>
        <button onClick={this.open}>open</button>
      </>
    );
  }
}

class PortalDialog extends Component {
  render() {
    return createPortal(
      <PortalDemo></PortalDemo>,
      document.body
    )
  }
}

export default PortalDialog;